﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标拖动图片及滚轮缩放图片</title>
<style type="text/css">
/* 效果CSS开始 */
html, body { height: 100%; background:gray; }
#oImg { position: absolute; left: 0px; top: 0px; z-index: 1; cursor:move; width:100%; height:100%; }
div.kePublic{ text-align:center;}
span.page
{
    display:inline-block;
    position:fixed;
    top:45%;
    z-index:100;
    width:50px;
    height:60px;
    cursor:pointer;
    }
span#prePage
{
     background:url(images/prePage.png);
     background-repeat:no-repeat;     
     left:20px;
    }
span#nextPage
{
    background:url(images/nextPage.png);
    background-repeat:no-repeat;
    
    right:20px;
    }
#scale
{
    position:absolute;
    left:10px;
    top:10px;
    width:50px;
    height:50px;
    z-index:100;
    cursor:pointer;
    }
/* 效果CSS结束 */
</style>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        var arcpath = GetQueryString("arcpath");
        var currpage = parseInt(GetQueryString("currpage"));
        var pagecount = parseInt(GetQueryString("pagecount"));
        $("#oImg").attr("src", arcpath);

        $("#prePage").click(function () {
            if (currpage > 1) {
                currpage--;
                var curr = $("div.pdfPagerList>ul>li.current", window.parent.document).removeClass("current");
                $(curr, window.parent.document).prev().addClass("current");
                $("#oImg").attr("src", arcpath.subString(0,arcpath.lastIndexOf("\\")+currpage+".jpg").css("width", "100%").css("height", "").css("left", "0px").css("top", "0px");
            }
            else {
                alert("已经到第一页啦");
            }
        });

        $("#nextPage").click(function () {
            if (pagecount > currpage) {
                currpage++;
                var curr = $("div.pdfPagerList>ul>li.current", window.parent.document).removeClass("current");
                $(curr, window.parent.document).next().addClass("current");
                $("#oImg").attr("src", "../../Handlers/Archive.ashx?opt=" + opt + "&clsId=" + clsId + "&arcId=" + arcId + "&currpage=" + currpage).css("width", "100%").css("height", "").css("left", "0px").css("top", "0px");
            }
            else {
                alert("已经到最后一页啦");
            }
        });

        $("#scale").click(function () {
            $("#oImg").css("width", "100%").css("height", "").css("left", "0px").css("top", "0px");
        });
    });
    function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return decodeURI(unescape(r[2])); return null;
    }
</script>
<script type="text/javascript">
//图片居中
    $(function () {
        var imgSource = GetQueryString("f");
        $("#oImg").attr("src", imgSource);
    });
    function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return decodeURI(unescape(r[2])); return null;
    }

/*绑定事件*/
function addEvent(obj, sType, fn) {
	if (obj.addEventListener) {
		obj.addEventListener(sType, fn, false);
	} else {
		obj.attachEvent('on' + sType, fn);
	}
};
function removeEvent(obj, sType, fn) {
	if (obj.removeEventListener) {
		obj.removeEventListener(sType, fn, false);
	} else {
		obj.detachEvent('on' + sType, fn);
	}
};
function prEvent(ev) {
	var oEvent = ev || window.event;
	if (oEvent.preventDefault) {
		oEvent.preventDefault();
	}
	return oEvent;
}
/*添加滑轮事件*/
function addWheelEvent(obj, callback) {
	if (window.navigator.userAgent.toLowerCase().indexOf('firefox') != -1) {
		addEvent(obj, 'DOMMouseScroll', wheel);
	} else {
		addEvent(obj, 'mousewheel', wheel);
	}
	function wheel(ev) {
		var oEvent = prEvent(ev),
		delta = oEvent.detail ? oEvent.detail > 0 : oEvent.wheelDelta < 0;
		callback && callback.call(oEvent, delta);
        ev.stopPropagation();
		return false;
	}
};
/*页面载入后*/
window.onload = function () {
    var oImg = document.getElementById('oImg');
    /*拖拽功能*/
    (function () {
        addEvent(oImg, 'mousedown', function (ev) {
            var oEvent = prEvent(ev),
			oParent = oImg.parentNode,
			disX = oEvent.clientX - oImg.offsetLeft,
			disY = oEvent.clientY - oImg.offsetTop,
			startMove = function (ev) {
			    if (oParent.setCapture) {
			        oParent.setCapture();
			    }
			    var oEvent = ev || window.event,
				l = oEvent.clientX - disX,
				t = oEvent.clientY - disY;
			    var parentWid = parseInt($(oParent).css("width"));
			    var parentHei = parseInt($(oParent).css("height"));
			    var imgWid = parseInt($(oImg).css("width"));
			    var imgHei = parseInt($(oImg).css("height"));

			    //alert(parentHei - imgHei); && l > (parentWid - imgWid)
			    //if (l < 0) {
			        oImg.style.left = l + 'px';
			    //}
			    //if (t < 0) {//&& t > (parentHei - imgHei)
			        oImg.style.top = t + 'px';
			    //}
			    oParent.onselectstart = function () {
			        return false;
			    }
			}, endMove = function (ev) {
			    if (oParent.releaseCapture) {
			        oParent.releaseCapture();
			    }
			    oParent.onselectstart = null;
			    removeEvent(oParent, 'mousemove', startMove);
			    removeEvent(oParent, 'mouseup', endMove);
			};
            addEvent(oParent, 'mousemove', startMove);
            addEvent(oParent, 'mouseup', endMove);
            return false;
        });
    })();
    /*以鼠标位置为中心的滑轮放大功能*/
    (function () {
        addWheelEvent(oImg, function (delta) {
            var ratioL = (this.clientX - oImg.offsetLeft) / oImg.offsetWidth,
			ratioT = (this.clientY - oImg.offsetTop) / oImg.offsetHeight,
			ratioDelta = !delta ? 1 + 0.1 : 1 - 0.1,
			w = parseInt(oImg.offsetWidth * ratioDelta),
			h = parseInt(oImg.offsetHeight * ratioDelta),
			l = Math.round(this.clientX - (w * ratioL)),
			t = Math.round(this.clientY - (h * ratioT));
            with (oImg.style) {
                width = w + 'px';
                height = h + 'px';
                left = l + 'px';
                top = t + 'px';
                var imgParentWid = parseInt($(oImg).parent().css("width"));
                var imgParentHei = parseInt($(oImg).parent().css("height"));
                if (w < imgParentWid) {
                    if (!$(oImg).is(":animated")) {
                        //$(oImg).animate({ width: imgParentWid, height: imgParentHei, left: "0px", top: "0px" }, 500);
                    }
                }
            }
        });
    })();
};
</script>
</head>
<body class="keBody">
<img id="scale" title="自适应页面" src="../../Images/scale.png" />
<div class="kePublic">
<!--效果html开始-->
<img id="oImg" onerror="this.style.display='none';document.getElementById('errMsg').innerHTML='没有预览图片';document.getElementById('prePage').style.display='none';document.getElementById('nextPage').style.display='none';document.getElementById('scale').style.display='none'"/>
<br />
<span id="errMsg"></span>
<!--效果html结束-->
</div>
<span title="上一页" id="prePage" class="page"></span>
<span title="下一页" id="nextPage" class="page"></span>
</body>
</html>